<script>

/**
 * Orders Component
 */
export default {
  data() {
    return {
      ordersData: [
        {
          name: "人民网",
          type: "资讯",
          status: "正常",
          num: "8",
          project: "项目一",
          collectData: "2,3451",
        }
      ],
      totalRows: 100,
      currentPage: 1,
      perPage: 10,
      fields: [
        { key: "name", label: "信源名称" },
        { key: "type", label: "信源类型" },
        { key: "status", label: "信源状态" },
        { key: "num", label: "种子数量" },
        { key: "project", label: "对应项目" },
        { key: "collectData", label: "采集数据" },
        { key: "viewData", label: "查看数据" },
        { key: "monitor", label: "最后监测时间" },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: '24小时',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '今天',
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date(new Date().toLocaleDateString()).getTime()); // 当天0点
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '昨天',
            onClick(picker) {
              let end = new Date(new Date(new Date().toLocaleDateString()).getTime() +24 * 60 * 60 * 1000 -1);// 当天23:59
              const start = new Date(new Date(new Date().toLocaleDateString()).getTime()); // 当天0点
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              end.setTime(end.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
      dateRange: '',
    };
  },
  watch: {
    "currentPage": {
      handler(){
        console.log("触发更新");
      }
    }
  },
  methods: {
    /**
     * Search the table data with search input
     */
    onFiltered(filteredItems) {
      // Trigger pagination to update the number of buttons/pages due to filtering
      this.totalRows = filteredItems.length;
      this.currentPage = 1;
    },
    Search(v){
      console.log(v);
    },
  }
};
</script>

<template>
  <div>
    <div class="search-box">
      <div>信源清单列表</div>
      <div>+添加条目</div>
    </div>
    <!-- 搜索 -->
    <div class="search-box">
      <div class="position-relative search">
        <input type="text" @keyup.enter="Search" class="form-control" placeholder="请输入关键字" />
        <i class="mdi mdi-magnify search-icon"></i>
      </div>
      <div>
        <el-date-picker
          v-model="dateRange"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          >
        </el-date-picker>
      </div>
    </div>
    <div class="table-responsive">
      <b-table
        class="table-centered"
        :items="ordersData"
        :fields="fields"
        responsive="sm"
        :per-page="perPage"
        :current-page="1"
        thead-class="thead-light"
        @filtered="onFiltered"
      >
        <template v-slot:cell(name)="row">
          <a style="color: #5664d2;" target="_blank">{{row.value}}</a>
        </template>
        <template v-slot:cell(viewData)>
          <div>查看</div>
        </template>
        <template v-slot:cell(monitor)>
          <span>5分钟前</span>
          <span style="margin:0 5px;">|</span>
          <span>监测</span>
        </template>
      </b-table>
    </div>
    <div class="row">
      <div class="col">
        <div class="dataTables_paginate paging_simple_numbers float-right">
          <ul class="pagination pagination-rounded mb-0">
            <!-- pagination -->
            <b-pagination v-model="currentPage" :total-rows="totalRows" :per-page="perPage"></b-pagination>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.search {
  float: left;
  width: 300px;
}
.search-box{
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>

